<template>
    <div class="rightOne">
        <div class="rightOne-title">
            人口统计
        </div>
        <div class="rightOne-content">
            <div class="rightOne-font">
                <div class="rightOne-left">
                    截止2020年海南省人口总数：
                </div>
                <div class="rightOne-right" >
                    <span @click="renkouTotal" id="rightOne-right">1051.958</span>
                    <span id="danwei">万人</span>
                </div>
            </div>
                 <!-- 人口统计弹框 -->
        <div class="personPort" id="personPort">
            <div class="personPort-close" @click="closeInfo()">
                <span>
                    {{countInfoName.title}}
                </span>
                <span>
                     <i class="el-icon-close"></i>
                </span>
            </div>
            <div class="personPort-name">
                2020年事故灾难：
            </div>
            <div class="personPort-title" v-for="(item,index) in infoArrtop" :key="index">
               {{item}}
            </div>
            <div class="personPort-name">
                2020年社会安全事件：
            </div>
            <div class="personPort-title" v-for="(item,index) in infoArrbot" :key="index">
               {{item}}
            </div>
        </div>
            <div class="rightOneEcharts">
              <el-carousel :interval="5000" arrow="always" class="elCarousel" :autoplay="false">
                <el-carousel-item>
                    <div id="echarts1">
                    </div>
                </el-carousel-item>
                 <el-carousel-item>
                    <div id="echarts2">
                    </div>
                </el-carousel-item>
                 <el-carousel-item>
                    <div id="echarts3">
                    </div>
                </el-carousel-item>
              </el-carousel>
            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios';
export default {
    name: "HngkRightOne",
     data(){
        return{
        countInfoName:{
            title:'',
            info:""
        },
        cityCenter:{
            海口市: [110.198418, 20.045805],
            三亚市: [109.511709, 18.252865],
            三沙市: [112.234483, 16.774644],
            儋州市: [109.580812, 19.520948],
            五指山市: [109.516784, 18.774827],
            文昌市: [110.797473, 19.544234],
            琼海市: [110.474524, 19.259112],
            万宁市: [110.392605, 18.793697],
            东方市: [108.651829, 19.095187],
            定安县: [110.358001, 19.681215],
            屯昌县: [110.101667, 19.351662],
            澄迈县: [110.007497, 19.738885],
            临高县: [109.690508, 19.912025],
            白沙黎族自治县: [109.4429, 19.221641],
            昌江黎族自治县: [109.055783, 19.298139],
            乐东黎族自治县: [109.173384, 18.750063],
            陵水黎族自治县: [110.037553, 18.506045],
            保亭黎族苗族自治县: [109.700373, 18.640156],
            琼中黎族苗族自治县: [109.838389, 19.033369],
        },
        infoArrtop:[],
        infoArrbot:[],
        countInfo:{
           "五指山市":["道路交通事故2起,造成3人死亡,0人受伤","农林牧渔业1起,造成2人死亡,1人受伤,0人失踪","建筑施工事故1起,造成1人死亡，0人受伤","其他工矿商贸事故0起,造成0人死亡，0人受伤","城乡火灾0起,造成0人死亡，0人受伤","其他事故灾难0起,造成0人死亡，0人受伤,0人失踪","学生溺水1起，造成1人死亡","群众溺水1起，造成1人死亡","刑事案件0起，造成0人死亡","其他社会安全事件2起，造成2人死亡"],
           "儋州市":["道路交通事故6起,造成10人死亡,11人受伤","农林牧渔业1起,造成1人死亡,0人受伤,0人失踪","建筑施工事故1起,造成1人死亡，2人受伤","其他工矿商贸事故2起,造成2人死亡，0人受伤","城乡火灾0起,造成0人死亡，0人受伤","其他事故灾难0起,造成0人死亡，0人受伤,0人失踪","学生溺水5起，造成6人死亡","群众溺水2起，造成2人死亡","刑事案件0起，造成0人死亡","其他社会安全事件1起，造成1人死亡"],
           "文昌市":["道路交通事故2起,造成2人死亡,4人受伤","农林牧渔业3起,造成2人死亡,0人受伤,0人失踪","建筑施工事故0起,造成0人死亡，0人受伤","其他工矿商贸事故1起,造成1人死亡，0人受伤","城乡火灾0起,造成0人死亡，0人受伤","其他事故灾难1起,造成1人死亡，0人受伤,0人失踪","学生溺水2起，造成2人死亡","群众溺水1起，造成2人死亡","刑事案件1起，造成1人死亡","其他社会安全事件3起，造成3人死亡"],
           "东方市":["道路交通事故21起,造成24人死亡,15人受伤","农林牧渔业1起,造成2人死亡,0人受伤,1人失踪","建筑施工事故0起,造成0人死亡，0人受伤","其他工矿商贸事故0起,造成0人死亡，0人受伤","城乡火灾0起,造成0人死亡，0人受伤","其他事故灾难2起,造成2人死亡，0人受伤,0人失踪","学生溺水4起，造成6人死亡","群众溺水6起，造成6人死亡","刑事案件1起，造成1人死亡","其他社会安全事件9起，造成9人死亡"],
           "海口市":["道路交通事故30起,造成33人死亡,36人受伤","农林牧渔业0起,造成0人死亡,0人受伤,0人失踪","建筑施工事故7起,造成7人死亡，0人受伤","其他工矿商贸事故5起,造成6人死亡，18人受伤","城乡火灾6起,造成0人死亡，0人受伤","其他事故灾难7起,造成7人死亡，0人受伤,0人失踪","学生溺水2起，造成2人死亡","群众溺水3起，造成3人死亡","刑事案件0起，造成0人死亡","其他社会安全事件3起，造成2人死亡"], 
           "三亚市":["道路交通事故3起,造成4人死亡,11人受伤","农林牧渔业3起,造成1人死亡,0人受伤,0人失踪","建筑施工事故2起,造成2人死亡，0人受伤","其他工矿商贸事故0起,造成0人死亡，0人受伤","城乡火灾0起,造成0人死亡，0人受伤","其他事故灾难6起,造成6人死亡，0人受伤,0人失踪","学生溺水4起，造成5人死亡","群众溺水5起，造成6人死亡","刑事案件0起，造成0人死亡","其他社会安全事件7起，造成7人死亡"],
           "琼海市":["道路交通事故2起,造成1人死亡,5人受伤","农林牧渔业1起,造成3人死亡,0人受伤,0人失踪","建筑施工事故1起,造成1人死亡，0人受伤","其他工矿商贸事故0起,造成0人死亡，0人受伤","城乡火灾1起,造成0人死亡，0人受伤","其他事故灾难1起,造成1人死亡，0人受伤,0人失踪","学生溺水0起，造成0人死亡","群众溺水2起，造成2人死亡","刑事案件0起，造成0人死亡","其他社会安全事件0起，造成0人死亡"],
           "万宁市":["道路交通事故7起,造成8人死亡,2人受伤","农林牧渔业2起,造成0人死亡,0人受伤,0人失踪","建筑施工事故0起,造成0人死亡，0人受伤","其他工矿商贸事故0起,造成0人死亡，0人受伤","城乡火灾0起,造成0人死亡，0人受伤","其他事故灾难0起,造成0人死亡，0人受伤,0人失踪","学生溺水0起，造成0人死亡","群众溺水2起，造成2人死亡","刑事案件1起，造成1人死亡","其他社会安全事件0起，造成0人死亡"],
           "屯昌县":["道路交通事故4起,造成5人死亡,4人受伤","农林牧渔业0起,造成0人死亡,0人受伤,0人失踪","建筑施工事故2起,造成2人死亡，0人受伤","其他工矿商贸事故0起,造成0人死亡，0人受伤","城乡火灾1起,造成0人死亡，0人受伤","其他事故灾难2起,造成1人死亡，3人受伤,0人失踪","学生溺水0起，造成0人死亡","群众溺水1起，造成1人死亡","刑事案件0起，造成0人死亡","其他社会安全事件2起，造成2人死亡"],
           "澄迈县":["道路交通事故3起,造成3人死亡,2人受伤","农林牧渔业0起,造成0人死亡,0人受伤,0人失踪","建筑施工事故1起,造成1人死亡，0人受伤","其他工矿商贸事故0起,造成0人死亡，0人受伤","城乡火灾0起,造成0人死亡，0人受伤","其他事故灾难1起,造成1人死亡，0人受伤,0人失踪","学生溺水3起，造成3人死亡","群众溺水0起，造成0人死亡","刑事案件1起，造成1人死亡","其他社会安全事件2起，造成2人死亡"],
           "临高县":["道路交通事故11起,造成11人死亡,10人受伤","农林牧渔业3起,造成0人死亡,0人受伤,2人失踪","建筑施工事故3起,造成3人死亡，4人受伤","其他工矿商贸事故0起,造成0人死亡，0人受伤","城乡火灾1起,造成0人死亡，0人受伤","其他事故灾难1起,造成1人死亡，0人受伤,0人失踪","学生溺水4起，造成4人死亡","群众溺水1起，造成2人死亡","刑事案件0起，造成0人死亡","其他社会安全事件1起，造成1人死亡"],
           "定安县":["道路交通事故2起,造成3人死亡,2人受伤","农林牧渔业0起,造成0人死亡,0人受伤,0人失踪","建筑施工事故1起,造成1人死亡，0人受伤","其他工矿商贸事故0起,造成0人死亡，0人受伤","城乡火灾1起,造成0人死亡，0人受伤","其他事故灾难2起,造成2人死亡，0人受伤,0人失踪","学生溺水3起，造成6人死亡","群众溺水0起，造成0人死亡","刑事案件0起，造成0人死亡","其他社会安全事件1起，造成1人死亡"],
           "陵水黎族自治县":["道路交通事故1起,造成3人死亡,2人受伤","农林牧渔业0起,造成0人死亡,0人受伤,0人失踪","建筑施工事故0起,造成0人死亡，0人受伤","其他工矿商贸事故1起,造成3人死亡，0人受伤","城乡火灾0起,造成0人死亡，0人受伤","其他事故灾难0起,造成0人死亡，0人受伤,0人失踪","学生溺水1起，造成1人死亡","群众溺水1起，造成1人死亡","刑事案件0起，造成0人死亡","其他社会安全事件1起，造成1人死亡"],
           "琼中黎族苗族自治县":["道路交通事故4起,造成4人死亡,6人受伤","农林牧渔业0起,造成0人死亡,0人受伤,0人失踪","建筑施工事故0起,造成0人死亡，0人受伤","其他工矿商贸事故0起,造成0人死亡，0人受伤","城乡火灾0起,造成0人死亡，0人受伤","其他事故灾难1起,造成1人死亡，0人受伤,0人失踪","学生溺水0起，造成0人死亡","群众溺水0起，造成0人死亡","刑事案件0起，造成0人死亡","其他社会安全事件0起，造成0人死亡"],
           "保亭黎族苗族自治县":["道路交通事故1起,造成1人死亡,0人受伤","农林牧渔业0起,造成0人死亡,0人受伤,0人失踪","建筑施工事故1起,造成1人死亡，0人受伤","其他工矿商贸事故0起,造成0人死亡，0人受伤","城乡火灾0起,造成0人死亡，0人受伤","其他事故灾难0起,造成0人死亡，0人受伤,0人失踪","学生溺水0起，造成0人死亡","群众溺水0起，造成0人死亡","刑事案件0起，造成0人死亡","其他社会安全事件0起，造成0人死亡"],
           "白沙黎族自治县":["道路交通事故2起,造成2人死亡,0人受伤","农林牧渔业0起,造成0人死亡,0人受伤,0人失踪","建筑施工事故0起,造成0人死亡，0人受伤","其他工矿商贸事故0起,造成0人死亡，0人受伤","城乡火灾0起,造成0人死亡，0人受伤","其他事故灾难1起,造成1人死亡，0人受伤,0人失踪","学生溺水0起，造成0人死亡","群众溺水0起，造成0人死亡","刑事案件0起，造成0人死亡","其他社会安全事件0起，造成0人死亡"],
           "昌江黎族自治县":["道路交通事故7起,造成9人死亡,0人受伤","农林牧渔业1起,造成2人死亡,0人受伤,3人失踪","建筑施工事故2起,造成2人死亡，0人受伤","其他工矿商贸事故0起,造成0人死亡，0人受伤","城乡火灾1起,造成2人死亡，0人受伤","其他事故灾难1起,造成1人死亡，0人受伤,0人失踪","学生溺水0起，造成0人死亡","群众溺水0起，造成0人死亡","刑事案件0起，造成0人死亡","其他社会安全事件0起，造成0人死亡"],
           "乐东黎族自治县":["道路交通事故5起,造成5人死亡,7人受伤","农林牧渔业1起,造成0人死亡,0人受伤,0人失踪","建筑施工事故0起,造成0人死亡，0人受伤","其他工矿商贸事故0起,造成0人死亡，0人受伤","城乡火灾1起,造成0人死亡，0人受伤","其他事故灾难4起,造成5人死亡，0人受伤,0人失踪","学生溺水3起，造成3人死亡","群众溺水1起，造成1人死亡","刑事案件0起，造成0人死亡","其他社会安全事件1起，造成2人死亡"],
        },
        citypoint:[
            {city:"海口市",lng:110.198418,lat:20.045805},
            {city:"三亚市",lng:109.511709, lat:18.252865},
            {city:"三沙市",lng:112.234483, lat:16.774644},
            {city:"儋州市",lng:109.580812,lat:19.520948},
            {city:"五指山市",lng:109.516784, lat:18.774827},
            {city:"文昌市",lng:110.797473, lat:19.544234},
            {city:"琼海市",lng:110.474524,lat:19.259112},
            {city:"万宁市",lng:110.392605,lat:18.793697},
            {city:"东方市",lng:108.651829, lat: 19.095187},
            {city:"定安县",lng:110.358001, lat:19.681215},
            {city:"屯昌县",lng:110.101667, lat:19.351662},
            {city:"澄迈县",lng:110.007497, lat:19.738885},
            {city:"临高县",lng:109.690508, lat:19.912025},
            {city:"白沙黎族自治县",lng:109.4429, lat:19.221641},
            {city:"昌江黎族自治县",lng:109.055783, lat:19.298139},
            {city:"乐东黎族自治县",lng:109.173384, lat:18.750063},
            {city:"陵水黎族自治县",lng:110.037553, lat:18.506045},
            {city:"保亭黎族苗族自治县",lng:109.700373, lat:18.640156},
            {city:"琼中黎族苗族自治县",lng:109.838389, lat:19.033369}],
        val:[
                {name: "五指山市", value: 13.1549},
                {name: "儋州市", value: 131.8870},
                {name: "文昌市", value: 70.3576},
                {name: "东方市", value: 52.4603},
                {name: "海口市", value: 154.4720}, 
                {name: "三亚市", value:100.0629},
                {name: "琼海市", value: 61.7250},
                {name: "万宁市", value: 70.8851},
                {name: "屯昌县", value: 36.6254},
                {name: "澄迈县", value: 64.9254},
                {name: "临高县", value: 55.6959},
                {name: "定安县", value: 39.5415},
                {name: "陵水黎族自治县", value:44.8412},
                {name: "琼中黎族苗族自治县", value: 25.2022},
                {name: "保亭黎族苗族自治县", value: 20.2822},
                {name: "白沙黎族自治县", value:18.9559},
                {name: "昌江黎族自治县", value: 32.0646},
                {name: "乐东黎族自治县", value: 58.8164},
            ],
            personCount:0,
            checkedType: 0,
            listLeft:0,
            newData:[],
            fontstatus:0,
            ecahrtsName1:[],
            ecahrtsValue1:[],
            ecahrtsName2:[],
            ecahrtsValue2:[],
            ecahrtsName3:[],
            ecahrtsValue3:[],
            oldmodel:null,
            model:[]
        }
    },
    props: {
        countByCity: Array,
    },
    watch:{
        // countByCity(oldval,newval){
        //     this.val = oldval
        // },
    },
    methods:{
        closeInfo(){
            var port = document.getElementById("personPort")
            if(port){
				// viewer._selectedEntity._billboard._image._value = `/data/images/icon/${this.oldmodel._dataType}.png`
				// this.oldmodel = null
				port.style.display ="none"
			}
        },
        renkouTotal(){
            if(this.fontstatus == 0){
            let fontcon = document.getElementById("rightOne-right")
            let fontcon1 = document.getElementById("danwei")
            fontcon.style.color = "#01c7ff"
            fontcon1.style.color="#01c7ff"
            layerManager.removeAll();
            axios.get("./data/geojson/海南省.json").then((res) => {
                let datas = res.data.features;
                this.val.push({ name: "三沙市", value: 0 });
                datas.forEach((element, index) => {
                    layerManager.addPloygon(
                        "shijie" + index,
                        [].concat.apply([], element.geometry.coordinates[0][0]),
                        parseInt(this.val[index].value * 0),
                        index,
                        "leftClick",
                         element.properties.name,
                    );
                });
                this.val.forEach((item, index) => {
                    layerManager.addOnlyLabel(
                        "xiangzhen" + index,
                        this.cityCenter[item.name],
                        parseInt(item.value * 0) + 300,
                        item.name + "\n(" + item.value + "万人)",
                        "leftClick",
                        item.name,
                       
                        // lLeftClick
                    );
                });  
                // this.dataToviewer(this.citypoint,"/data/images/hngk/person.png","地区人中心")
                for(var i =0;i<this.citypoint.length;i++){
                    layerManager.addBillboards(this.citypoint[i],"/data/images/hngk/person.png",this.citypoint[i].city,23,"地区人中心")
                }
                layerManager.fly(
                    109.81718500012782,
                    19.345261718452747,
                    474882,
                    6.237318703147128,
                    -1.5704875459600833,
                    0
                );
            });
            this.fontstatus =1
            }else if(this.fontstatus == 1){
            let fontcon = document.getElementById("rightOne-right")
            let fontcon1 = document.getElementById("danwei")
            fontcon.style.color = "white"
            fontcon1.style.color="white"
            layerManager.removeAll();
            this.fontstatus =0
            }

        },
        initIcon(){
            var handlerVideo = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)
             handlerVideo.setInputAction((movement) => {
                //  console.log(viewer.selectedEntity._dataType == )
                // console.log(viewer.selectedEntity)
                const pick = viewer.scene.pick(movement.position);
                // console.log(pick.id._id.substr(0,9))
                if(pick && pick.id.zidatatype == "地区人中心" || (pick.id._id.substr(0,9)) == "xiangzhen"){
                     // this.infoArrtop= []
            // this.infoArrbot = []
                    // console.log((pick.primitive._text).substr(0,3))
                    if(pick.id.dataType){
                        this.countInfoName.title = pick.id.dataType
                        this.infoArr= this.countInfo[pick.id.dataType]
                    }else if((pick.id._id.substr(0,9)) == "xiangzhen"){
                        var arr = pick.primitive._text.split("\n")
                        this.countInfoName.title = arr[0]
                       this.infoArr= this.countInfo[arr[0]]
                    }
                    this.infoArrtop= []
                    this.infoArrbot = []
                    for(var i =0;i<this.infoArr.length;i++){
                        // console.log(infoArr[i])
                        if(i>0 && i<=5){
                            this.infoArrtop.push(this.infoArr[i])
                        }else if(i>=6 && i<=9){
                            this.infoArrbot.push(this.infoArr[i])
                        }
                    }
                    // this.countInfoName.info = this.countInfo[pick.id.dataType][0]
                    // this.countInfoName.info = this.countInfo[pick.id.dataType][0]
                    this.addBoundInfoBox(pick.primitive._position,"personPort")
                    
                }
                //  if(viewer.selectedEntity._dataType == "地区人中心"){
                //      console.log(viewer.selectedEntity)
                //  }
                    // if((viewer.selectedEntity._id).substr(0,6) == "shijie"){
                    //     if(this.oldmodel){
                    //      this.oldmodel.polygon.material = viewer._selectedEntity.polygon.material
                    //     }
                    //     viewer.selectedEntity.polygon.material = Cesium.Color.fromCssColorString("rgba(239, 178, 51,1)").withAlpha(1)
                    //     this.oldmodel = viewer.selectedEntity
                    //     // console.log(this.countInfo[viewer.selectedEntity._datas][0])
                    //     // console.log(this.countInfo[viewer.selectedEntity._datas][1])
                    //     // console.log(viewer._selectedEntity._polyline._positions._value[0])
                    //     this.addBoundInfoBox(viewer._selectedEntity._polyline._positions._value[0],"personPort")
                    // }
                
                //  maritimePortInfo.mc = viewer._selectedEntity._dataSource.mc
                //  maritimePortInfo.shengMc = viewer._selectedEntity._dataSource.shengMc
                //  maritimePortInfo.shiMc = viewer._selectedEntity._dataSource.shiMc
                //  maritimePortInfo.xianMc = viewer._selectedEntity._dataSource.xianMc
                //  maritimePortInfo.zhenMc = viewer._selectedEntity._dataSource.zhenMc
                //  addBoundInfoBox(viewer._selectedEntity._polyline._positions._value[0],"maritimePort")
             },Cesium.ScreenSpaceEventType.LEFT_CLICK)
        },
        addBoundInfoBox(positionValue, elementId){
            // this.infoArrtop= []
            // this.infoArrbot = []
            const oneDiv = window.document.getElementById(elementId);
            oneDiv.style.display = "block";
            let that = this
            let preRenderListener = viewer.scene.postRender.addEventListener(()=>{
                  let elWidth = oneDiv.offsetWidth;
                  let elHeight = oneDiv.offsetHeight;
                  if(that.screenWidth  === 1920){
                    elWidth = oneDiv.offsetWidth
                    elHeight = oneDiv.offsetHeight
                  }else if(that.screenWidth  === 3840){
                    elWidth = oneDiv.offsetWidth -1920;
                    elHeight = oneDiv.offsetHeight
                  }
                    const scratch = new Cesium.Cartesian2(); //cesium二维笛卡尔 笛卡尔二维坐标系就是我们熟知的而二维坐标系；三维也如此
                    let position = positionValue;
                    var cartographicPosition = Cesium.Ellipsoid.WGS84.cartesianToCartographic(position); //笛卡尔转84
                    var lat=Cesium.Math.toDegrees(cartographicPosition.latitude);
                    var lng=Cesium.Math.toDegrees(cartographicPosition.longitude);
                    var alt=cartographicPosition.height;
                    var positions = [
                            Cesium.Cartographic.fromDegrees(lng,lat)
                    ];
                    var carto=new Cesium.Cartographic.fromDegrees(lng,lat)　　//输入经纬度
                    // var h2=viewer.scene.sampleHeight(carto);
					var position1 = Cesium.Cartesian3.fromDegrees(lng, lat);
					const canvasPosition =
						viewer.scene.cartesianToCanvasCoordinates(
							position1,
							scratch
						); //cartesianToCanvasCoordinates 笛卡尔坐标（3维度）到画布坐标
					if (Cesium.defined(canvasPosition)) {
						// 根据元素宽高及当前点屏幕坐标进行偏移
						oneDiv.style.top =
							canvasPosition.y - elHeight * 1.1 + "px";
						oneDiv.style.left =
							canvasPosition.x - elWidth / 2 + "px";
					}
					return;
					// var promise = viewer.scene.sampleHeightMostDetailed(positions);
					// promise.then((updatedPosition)=>{
					// 	// console.log(updatedPosition[0].updatedPosition)
					// 	var position1 = Cesium.Cartesian3.fromDegrees(lng, lat,updatedPosition[0].updatedPosition);//加入高度之后，不会飘，但是不能解决地球缩放问题
					// // console.log(h2)
					// })

                    // var promise = Cesium.sampleTerrainMostDetailed(window.dx, positions);//(地形数据，positions)
            })
		},
        initEcharts1(){
            for(let key in this.val){
                if(key >0 && key <=6 ){
                    this.ecahrtsName1.push(this.val[key].name)
                    this.ecahrtsValue1.push(this.val[key].value)
                }
            }
            let dom = document.getElementById("echarts1");
            let myChart1 = echarts.init(dom);
            var salvProName = this.ecahrtsName1;
            var salvProValue = this.ecahrtsValue1;
            var salvProMax = []; //背景按最大值
            // for (let i = 0; i < salvProValue.length; i++) {
            //     salvProMax.push(salvProValue[0]);
            // }
           let option = {
    tooltip: {
        trigger: 'axis',
        show: false,
        axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
        },
    },
    legend: {
        show:false
    },
    grid: {
        left: '0%',
        top:"0%",
        right: '20%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [{
        splitLine: {
            show: false
        },
        type: 'value',
        show: false,
    }],
    yAxis: [{
        splitLine: {
            show: false
        },
        axisLine: { //y轴
            show: false
        },
        type: 'category',
        axisTick: {
            show: false
        },
        inverse: true,
        data: salvProName,
        axisLabel: {
            color: '#ffffff',
            fontSize: 14,
        }
    }],
    series: [{
        name: '标准化',
        type: 'bar',
        barWidth: 12, // 柱子宽度
        label: {
            show: true,
            position: [220,0], // 位置
            color: '#ffffff',
            fontSize: 12,
            // align:"right", 
            distance: 15, // 距离
			formatter: '{c} 万人' // 这里是数据展示的时候显示的数据
        }, // 柱子上方的数值
        itemStyle: {
            barBorderRadius: [0, 20, 20, 0], // 圆角（左上、右上、右下、左下）
            
                color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                    offset: 0,
                    color: '#51C5FD'
                }, {
                    offset: 1,
                    color: '#005BB1' 
                }], false), // 渐变
        },
        data: salvProValue
    }, ]
};
            myChart1.setOption(option);
            window.addEventListener("resize", () => {
                myChart1.resize();
            });
        },
        initEcharts2(){
            for(let key in this.val){
                if(key >6 && key <=11 ){
                    this.ecahrtsName2.push(this.val[key].name)
                    this.ecahrtsValue2.push(this.val[key].value)
                }
            }
            let dom = document.getElementById("echarts2");
            let myChart1 = echarts.init(dom);
            var salvProName = this.ecahrtsName2;
            var salvProValue = this.ecahrtsValue2;
           let option = {
    tooltip: {
        trigger: 'axis',
        show: false,
        axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
        },
    },
    legend: {
        show:false
    },
    grid: {
        left: '0%',
        top:"0%",
        right: '25%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [{
        splitLine: {
            show: false
        },
        type: 'value',
        show: false,
    }],
    yAxis: [{
        splitLine: {
            show: false
        },
        axisLine: { //y轴
            show: false
        },
        type: 'category',
        axisTick: {
            show: false
        },
        inverse: true,
        data: salvProName,
        axisLabel: {
            color: '#ffffff',
            fontSize: 14,
        }
    }],
    series: [{
        name: '标准化',
        type: 'bar',
        barWidth: 12, // 柱子宽度
        label: {
            show: true,
            position: [220,0], // 位置
            color: '#ffffff',
            fontSize: 12,
            // align:"right", 
            distance: 15, // 距离
			formatter: '{c} 万人' // 这里是数据展示的时候显示的数据
        }, // 柱子上方的数值
        itemStyle: {
            barBorderRadius: [0, 20, 20, 0], // 圆角（左上、右上、右下、左下）
            
                color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                    offset: 0,
                    color: '#51C5FD'
                }, {
                    offset: 1,
                    color: '#005BB1' 
                }], false), // 渐变
        },
        data: salvProValue
    }, ]
};
            myChart1.setOption(option);
            window.addEventListener("resize", () => {
                myChart1.resize();
            });
        },
        initEcharts3(){
            for(let key in this.val){
                if(key >11 && key <=16){
                    this.ecahrtsName3.push(this.val[key].name)
                    this.ecahrtsValue3.push(this.val[key].value)
                }
            }
            let dom = document.getElementById("echarts3");
            let myChart1 = echarts.init(dom);
            var salvProName = this.ecahrtsName3;
            var salvProValue = this.ecahrtsValue3;
            var salvProMax = []; //背景按最大值
            // for (let i = 0; i < salvProValue.length; i++) {
            //     salvProMax.push(salvProValue[0]);
            // }
           let option = {
    tooltip: {
        trigger: 'axis',
        show: false,
        axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
        },
    },
    legend: {
        show:false
    },
    grid: {
        left: '0%',
        top:"0%",
        right: '20%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [{
        splitLine: {
            show: false
        },
        type: 'value',
        show: false,
    }],
    yAxis: [{
        splitLine: {
            show: false
        },
        axisLine: { //y轴
            show: false
        },
        type: 'category',
        axisTick: {
            show: false
        },
        inverse: true,
        data: salvProName,
        axisLabel: {
            color: '#ffffff',
            fontSize: 14,
        }
    }],
    series: [{
        name: '标准化',
        type: 'bar',
        barWidth: 12, // 柱子宽度
        label: {
            show: true,
            position: [150,0], // 位置
            color: '#ffffff',
            fontSize: 12,
            // align:"right", 
            distance: 15, // 距离
			formatter: '{c} 万人' // 这里是数据展示的时候显示的数据
        }, // 柱子上方的数值
        itemStyle: {
            barBorderRadius: [0, 20, 20, 0], // 圆角（左上、右上、右下、左下）
            
                color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                    offset: 0,
                    color: '#51C5FD'
                }, {
                    offset: 1,
                    color: '#005BB1' 
                }], false), // 渐变
        },
        data: salvProValue
    }, ]
};
            myChart1.setOption(option);
            window.addEventListener("resize", () => {
                myChart1.resize();
            });
        },
        dataToviewer(data, img,type) {
        for (var i = 0; i < data.length; i++) {
          this.entity = viewer.entities.add({
					ID: data.ID,
					cursor: true,
					data: data[i],
					dataimage:img,
					dataType:type,
                    dataPosition:[data[i].lng,data[i].lat],
					position: Cesium.Cartesian3.fromDegrees(data[i].lng, parseFloat(data[i].lat)),
					billboard: {
						image: img,
						verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
						horizontalOrigin: Cesium.HorizontalOrigin.CENTER, //
						width: 20,
						height: 25,
						heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
                        scaleByDistance:new Cesium.NearFarScalar(1.5e2, 1.5, 8.0e6, 0.0)
					},
				})
         this.model.push(this.entity)
        }
	},
    },
    created(){
        // this.initData()
        // this.initrkgk()
    },
    mounted(){
        this.initEcharts1()
        this.initEcharts2()
        this.initEcharts3()
        this.initIcon()
        // el-icon-arrow-left
        var left = window.document.getElementsByClassName("el-carousel__arrow--left")
        if(left){
          left.forEach((ele)=>{
           ele.style.display = "none"
          })
        }
        var right = window.document.getElementsByClassName("el-carousel__arrow--right")
        if(right){
          right.forEach((ele)=>{
           ele.style.display = "none"
          })
        }
        // a.style.display = "none"

    }
};
</script>
<style lang="stylus">
.el-carousel__container  {
    height: vh(270)
}
</style>
<style lang="stylus" scoped>
@media (max-width: 2880px) {
    .rightOne {
        height: vh(300);
        width: vw(364);
        // background :pink;
            .personPort{
            // width:vw(240);
            // height:vh(200);
            background: rgba(3,32,64,0.6)
            display:none;
            // border-radius:vw(5);
            box-sizing :border-box;
            position:fixed;
            // border:1px solid rgb(48, 163, 196);
            padding:10px;
            font-size:vw(15)
            .personPort-close{
                width:vh(400);
                height:vh(30);
                line-height:vh(30);
                text-align:center;
                span:nth-child(1){
                    // float:left
                    color:#FFFF02;
                    font-size:vw(18)
                }
                span:nth-child(2){
                    float:right
                }
                // float:right;
                cursor:pointer
            }
            .personPort-name{
                width:100%;
                height:vh(30);
                line-height:vh(30);
                color:rgb(1, 199, 255);
                font-size:vw(16)
            }
            .personPort-title{
                width:100%;
                height:vh(30);
                line-height:vh(30);
            }
        }
        .rightOne-title{
            height: vh(24);
            width: vw(364);
            padding-left:vw1(12);
		    line-height: vh(24);
		    border-left: 2px solid #00e5fd;
		    font-family: 'FZTYSJW';
		    font-size: 18px;
		    font-weight: 600;
		    text-align: left;
		    color: #ffffff;
		    text-shadow: 0px 4px 4px 0px #000000;
		    background-clip: text;
		    -webkit-text-fill-color: transparent;
		    background-image: -webkit-linear-gradient(bottom, #00eaff, #ffffff);
        }
        .rightOne-content{
             width: vw(366);
             height: vh(270);
            //  background:pink;
             .rightOne-font{
                width:vw(366);
                height:vh(40);
                line-height :vh(40)
                // background:pink;
                padding:10px;
                box-sizing :border-box
                .rightOne-left{
                    color: #fff;
                    font-size: vw(15);
                    letter-spacing: vw(1);
                    float:left
                }
                .rightOne-right{
                    color: #fff;
                    letter-spacing: vw(1);
                    float:left;
                    cursor:pointer;
                    span:nth-child(1){
                        font-size:vw(20)
                    }
                    span:nth-child(2){
                        font-size:vw(15)
                    }
                }
                .rightOne-rightActive{
                    color:blue;
                    letter-spacing: vw(1);
                    float:left;
                    cursor:pointer;
                    span:nth-child(1){
                        color:#01c7ff;
                        font-size:vw(20)
                    }
                    span:nth-child(2){
                         color:#01c7ff;
                        font-size:vw(15)
                    }
                }
             }
             .rightOneEcharts{
                width:vw(366);
                height:vh(220);
                // background:pink;
                margin-top:vh(10);
                .elCarousel{
                    width:vw(366);
                    height:vh(220);
                    #echarts1{
                        width:vw(366);
                        height:vh(220);
                        // background:pink
                    }
                     #echarts2{
                        width:vw(366);
                        height:vh(220);
                        // background:pink
                    }
                     #echarts3{
                        width:vw(366);
                        height:vh(220);
                        // background:pink
                    }
                }
             }
        }
    }
}
</style>